<template>
  <div class="div">
    <el-card shadow="always" class="box-card1">
      <div class="div1">
        <img
          class="img1"
          :src="
            'http://localhost:3000' + Store.NowLoginuser.avator ||
            '/userimg.jpg'"
          alt=""
        />
        <span style="font-size: 0.2rem"
          >欢迎回来，{{
            Store.NowLoginuser.username
          }},你可以有点累了，喝杯咖啡提提神把</span
        >
      </div>
    </el-card>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>公司产品</span>
        </div>
      </template>
      <el-carousel :interval="4000" :type="card" height="30vh">
        <el-carousel-item v-for="item in product" :key="item">
          <div
            :style="{
              backgroundSize: 'cover',
              backgroundImage: `url(http://localhost:3000${item.cover})`,
            }"
          >
            <h3 class="back">{{ item.title }}</h3>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-card>
  </div>
</template>

<script setup>
import { useStore } from "../../../stores/counter";
import { GetAllProduct } from "@/request/home/userapi.js";
import { computed, onMounted, ref, watch } from "vue";
const Store = useStore();
const card = ref("card");
const User = ref(0);
const product = ref();
const Width = computed(() => Store.Width);
if (Width.value < 450) card.value = "null";
watch(Width, (newValue, oldValue) => {
  if (newValue < 450) {
    card.value = "null";
  } else card.value = "card";
});
onMounted(async () => {
  const result = await GetAllProduct();

  product.value = result.data.result;
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}
.img1 {
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.item {
  margin-bottom: 18px;
}
.box-card1 {
  width: 90%;
}
.box-card {
  width: 90%;
  height: 50%;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.div {
  width: 100%;
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.div1 {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
@media (max-width: 450px) {
  .box-card1 {
    width: 100%;
  }
  .box-card {
    width: 100%;
  }
  .div1 {
    width: 100%;
    display: flex;
    flex-direction: column;

    height: 20vh;
  }
  .div {
    height: calc(100vh - 50px);
    background: white;
    width: 100%;
    display: flex;
    flex-direction: column;

    justify-content: space-around;
  }
}
</style>